<template>
    <section class="modlude">
        <el-table :data="formData" style="width: 100%" stripe @selection-change="handleSelectionChange">
            <el-table-column type="selection" width="55"></el-table-column>
            <el-table-column prop="name" label="设备名称"></el-table-column>
            <el-table-column prop="alarmCode" label="故障代码"></el-table-column>
            <el-table-column prop="alarmEvent" label="故障事件"></el-table-column>
            <el-table-column prop="alarmReason" label="故障信息"></el-table-column>
            <el-table-column prop="alarmTime" label="故障时间"></el-table-column>
            <el-table-column prop="tenementAddress" label="住户地址"></el-table-column>

            <el-table-column label="故障详情">
                <template slot-scope="scope">
                    <el-button size="small" type="text" @click="godevicedetails(scope.row)">详情</el-button>
                </template>
            </el-table-column>
            <inBody>
                <el-dialog  title="故障详情" :visible.sync="codeShow" width="40%" :close-on-click-modal="false">
                <div class="logInfo">
                    <div class="desc">
                    <p>设备ip:{{ selectedDevice.ipAddress }}</p>
                    <!-- <p>设备编号:{{ selectedDevice.terminalNumber }}</p> -->
                    <p>设备名称:{{ selectedDevice.name }}</p>
                    <p>住户名称:{{ selectedDevice.tenementName }}</p>
                    <p>住户地址:{{ selectedDevice.tenementAddress }}</p>
                    <p>住户电话:{{ selectedDevice.telephone }}</p>
                </div>
                <div class="desc">
                    <p>故障代码:{{ selectedDevice.alarmCode }}</p>
                    <p>故障事件:{{ selectedDevice.alarmEvent }}</p>
                    <p>故障信息:{{ selectedDevice.alarmReason }}</p>
                    <p>故障时间:{{ selectedDevice.alarmTime }}</p>
                </div>
                </div>
                
                <div slot="footer" class="dialog-footer">
                    <el-button size="medium " @click="codeShow = false">关 闭</el-button>
                </div>
               </el-dialog>
            </inBody>


            <!-- <el-table-column prop="alarmTime" label="报警时间">
                <template slot-scope="scope" v-if="scope.row.alarmTime">
                    {{formatDate(scope.row.startTime)}}
                </template>
            </el-table-column> -->

        </el-table>
        <paging @changePage=handleCurrentPage :get-total='total' :currentPage="formSearch.current"></paging>
        <!-- 添加 -->
    </section>
</template>

<script>
import paging from '../../../components/paging.vue';
import {
    getAnJuBaoCisLog
    
} from '../../../url/api';
export default {
    data() {
        return {
            formSearch: {
                current: 1,
                size: 10,
            },
            formData: [], //数据
            deleBatch: [], //删除数据
            formUpdate: {}, //修改表单
            total: 0, //数据总数
            pages: 0, //页面总数
            addDialog: false,
            updateDialog: false,
            dialog: false,
            rules: {
                name: [{ required: true, message: '该项不能为空' }],
                type: [
                    {
                        required: true,
                        message: '该项不能为空',
                        trigger: 'blur',
                    },
                ]
            },
            imageUrl: '',
            codeShow:false,
            selectedDevice:[],
        };
    },
    created(){

this.Bus.$on('sendTableDatapk_cis2',(data)=>{
    console.log('~~~~',data);
    this.formSearch = data.formSearch;
    // this.total = data.total
    this.getList();
  })
},
    mounted () {
        this.getList()
    },
    methods: {
        //时间格式拼接
        formatDate(time) {
          if (time.length < 6) {
            time.push(0); // 当时间秒为00时，后端只会返回五个数字，所以往数组末尾添加默认值 0
          }
            const [year, month, day, hour, minute, second] = time;
            const formattedDate = `${year}-${this.padZero(month)}-${this.padZero(day)}`;
            const formattedTime = `${this.padZero(hour)}:${this.padZero(minute)}:${this.padZero(second)}`;
            return `${formattedDate} ${formattedTime}`;
        },
        padZero(num) {
        return num.toString().padStart(2, '0');
        },        // 开门结果
        getOperResult(val){
                return val == 1 ? '成功' : '失败';
            },
        handleSelectionChange(val) {
            //多选
            this.deleBatch = val;
            console.log(this.deleBatch);
        },
        //页码改变
        handleCurrentPage(val) {
            this.formSearch.current = val;
            this.getList();
        },
        getList(){
            let params = {
                current:this.formSearch.current,
                  size:this.formSearch.size,
                  startTime:this.formSearch.startTime,
                  endTime:this.formSearch.endTime,
                  name:this.formSearch.name,
            }
            getAnJuBaoCisLog(params).then((res) => {
                        if (res.data.ok) {
                            this.formData = res.data.data.records
                            this.total = res.data.data.total
                        }
                    });
        },
        godevicedetails(row){
                this.codeShow = true
                this.selectedDevice = row;
                console.log(row);
            },
    },
    components: {
        paging,
    },
};
</script>
<style scoped lang='scss'>
.form_inline /deep/ .el-form-item {
    margin: 10px 4px;
}
.form_inline /deep/ .el-date-editor.el-input,
.el-date-editor.el-input__inner {
    width: 156px;
}
.logInfo{
        display: flex;
        flex-direction:row;
      .desc{
        width: 50%;
      p{
        margin-bottom: 20px;
    }  
    }  
    }
</style>
